<template>
	<view>
		<view class="box" :style="{'background':backgroundColor}"  @click="clickMarquee()">
			<view style="transform:rotate(90deg)">
				<view id="textDom" class='texts' ref="devcolor"
					:style="{'--speed':time+'s','animation-play-state':state,'font-size':fontSize+'px','color':fontColor,'top':textDomTop}">
					{{text_value}}
				</view>
			</view>
			
		</view>
		<view class="bottom_b">
			<input v-model="text_values" type="text" cursor-spacing='10' placeholder="请输入内容" />
			<button type="primary" @click="submit">提交</button>
			<button type="primary" @click="toggle('bottom')">属性</button>
		</view>
		<uni-popup ref="popup" type="message">
			<view class="shezhi">
				<view class="swiper_view">
					<view :class="['li',active==0?'active':'']" @click="clicl_li(0)">
						字号
					</view>
					<view :class="['li',active==1?'active':'']" @click="clicl_li(1)">
						颜色
					</view>
					<view :class="['li',active==2?'active':'']" @click="clicl_li(2)">
						速度
					</view>
					<view :class="['li',active==3?'active':'']" @click="clicl_li(3)">
						背景
					</view>
				</view>
				<swiper class="swiper" disable-touch circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration" :current='active'>
					<swiper-item>
						<!-- 文字大小 -->
						<view class="swiper-item">
							<slider style="width:80%;" value="12" step='4' @change="sliderChange" min="12" max="100"
								show-value />
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<!-- 拾色器 -->
							<picker-color :isShow="showPickerColor" :bottom="0" @callback="getColor" />
						</view>
					</swiper-item>
					<!-- 滚动速度 -->
					<swiper-item>
						<view class="swiper-item">
							<slider style="width:80%;" value="10" step='1' @change="sliderChange_sd" min="10" max="50"
								show-value />
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<!-- 拾色器 -->
							<picker-color :isShow="showPickerColor" :bottom="0" @callback="getbgColor" />
						</view>
					</swiper-item>
				</swiper>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import pickerColor from "@/components/helang-pickerColor/helang-pickerColor.vue"
	export default {
		components: {
			"picker-color": pickerColor,
		},
		data() {
			return {
				showSwitch:false,
				backgroundColor: '#fff',
				fontSize: 120,
				fontColor: '#333',
				textDomTop: '',
				text_value: '手持弹幕',
				text_values: '',
				active: 1,
				type: 'bottom',
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				showPickerColor: false,
				screenHeight: 0,
				time:5,
				playState: 'paused',
				state: 'running'// 动画的开始和结束执行
			}
		},
		onShareAppMessage(e) {
				console.log(e);
		//区分是button 页面按钮点击的分享还是 右上角三个点 menu点击的分享
				// if (e.from === 'button') {
				// 	return {
				// 		title: '分享',//分享标题
				// 		imageUrl: '/static/logo.png',//分享图片
				// 		path: '/pages/home/home'
				// 	}
				// }
				if (e.from === 'menu') {
					return {
						title: '分享',
						imageUrl: '/static/logo.png',
						path: '/pages/tool/danmu/danmu'
					}
				}
			},
		mounted() {
		
		},
		watch: {
			playState(val) {
				if (val == 'play') this.state = 'running';
				else this.state = 'paused';
			}
		},
		methods: {
			clickMarquee() {
				this.showSwitch = this.playState == 'play' ? false : true;
				this.playState = this.playState == 'play' ? 'paused' : 'play';
			},
			submit() {
				this.text_value = this.text_values
				this.text_values = ''
			},
			clicl_li(num) {
				this.active = num
				if (num == 1 || num == 3) {
					this.showPickerColor = true;
				}
			},
			toggle(type) {
				this.type = type
				this.$refs.popup.open(type)
				this.active = 0

			},
			closeDrawer() {
				this.$refs.showRight.close();
			},
			//字体大小
			sliderChange(e) {
				this.fontSize = e.detail.value * 5
			},
			sliderChange_sd(e) {
				this.time = e.detail.value / 10 
			},
			// 颜色
			getColor(color) {
				/* 判断颜色值是否有效 */
				if (color) {
					this.fontColor = color;
				}
			},
			getbgColor(color) {
				/* 判断颜色值是否有效 */
				if (color) {
					this.backgroundColor = color;
				}
			}
		}
	}
</script>

<style scoped>
	.box {
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 1;
	}

	.shezhi {
		width: 100%;
		background: #333;
	}

	.swiper_view {
		width: 100%;
		display: flex;
	}

	.li {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #bebebe;
	}

	.active {
		background: #007AFF;
		color: #fff;
	}

	.swiper {
		width: 100%;
		height: 120px;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.texts {
		width: 100vw;
		white-space: nowrap;
		animation: aniMove var(--speed) linear infinite;
	}

	.bottom_b {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: fixed;
		bottom:20rpx;
		left: 0;
		z-index: 9;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.bottom_b input {
		width: 60%;
		height:80rpx;
		line-height:80rpx;
		border: 1px solid #000;
		border-radius: 10rpx;
		background: none;
		color: #000;
		font-size: 28rpx;
		padding: 5rpx 10rpx;
		box-sizing: border-box;
	}

	.bottom_b button {
		width: 19%;
		height: 80rpx;
		line-height:80rpx;
		background: #000;
		color: #fff;
		font-size: 28rpx;
		margin-left: 1%;
		border-radius: 10rpx;
		text-align: center;
	}


	@keyframes aniMove {
		0% {
			transform: translateX(100%);
		}
	
		100% {
			transform: translateX(-50%);
		}
	}
</style>